<template>
	<view class="content">
		<view class="head">
			<step :step="step" :currentIndex="currentIndex"></step>
		</view>
		<view class="activity" v-show="currentIndex==0">
			<activity3></activity3>
			<view class="menpiao">
				<view class="name">
					普通入场票
				</view>
				<view class="text-money">¥ 987</view>
				<view class="text-desc">备注说明: 信息及焚枯食淡拉飞机的斯科拉家饭店烧烤了哈哈哈法定</view>
				<view class="sjx"></view>
				<view class="nubmer">
					<view class="op" @tap="changeNumber(-1)">-</view>
					<view class="value">{{number}}</view>
					<view class="op" @tap="changeNumber(1)">+</view>
				</view>
			</view>
		</view>
		<view class="form" v-show="currentIndex==1">
			<label class="inputText">
				<view>姓名</view>
				<input type="text" placeholder="请输入姓名" />
			</label>
			<label class="inputText">
				<view>电话</view>
				<input type="text" placeholder="请输入电话" />
			</label>
			<label class="inputText">
				<view>邮箱</view>
				<input type="text" placeholder="请输入邮箱" />
			</label>
			<label class="inputText">
				<view>职业</view>
				<input type="text" placeholder="请输入职业" />
			</label>
			<label class="inputText">
				<view>公司</view>
				<input type="text" placeholder="请输入公司" />
			</label>
			<view class="tishi">* 提示: 所有的字段必须填写</view>
		</view>
		<view class="zf">

		</view>
		<view class="button" @tap="next()">
			{{currentIndex==1?'支付':'下一步'}}
		</view>
		<view class="button" @tap="ff()">
			测试
		</view>
	</view>
</template>

<script>
	import Step from '../../components/step.vue'
	import Activity3 from '../../components/activity3.vue'
	export default {
		name: 'SignUp',
		data: function () {
			return {
				step: ["选择票种", "填写详细", "支付"],
				currentIndex: 0,
				number: 1
			};
		},
		methods: {
			next() {
				this.currentIndex = this.currentIndex + 1
				if (this.currentIndex == 2) {
					// 发送请求 活动id 门票id数量,附加信息姓名,电话....

					// 已下单,跳转到支付页面支付
					uni.redirectTo({
						url: '/pages/payment/index'
					});
				}
			},
			changeNumber(val) {
				this.number = this.number + val
				if (this.number < 1)
					this.number = 1
			},
			ff() {
				this.currentIndex = 0
			}
		},
		components: {
			Step,
			Activity3
		},
	}
</script>

<style scoped>
	.head {
		height: 20vh;
	}

	swiper,
	swiper-item {
		height: 80vh;
		overflow-y: auto;
	}

	.menpiao {
		position: relative;
		margin: 30px;
		padding: 30px;
		background: #fff;
		border: 1px solid #0099CC;
		overflow: hidden;
	}
	/* 斜三角 */

	.menpiao .sjx {
		position: absolute;
		top: -18px;
		left: -20px;
		width: 50px;
		height: 100px;
		background: #0099CC;
		transform: rotate(30deg);
	}

	.menpiao .name {
		height: 80px;
		font-size: 35px;
		line-height: 80px;
	}

	.desc {
		padding-top: 20px;
		border-top: 1px solid #eee;
	}

	.nubmer {
		display: flex;
		position: absolute;
		top: 20px;
		right: 10px;
	}

	.nubmer .op {
		padding: 15px 30px;
		border: 1px solid #777;
	}

	.nubmer .value {
		padding: 15px 30px;
	}

	.form {
		margin-top: 38px;
		padding: 30px;
		background: #fff;
	}

	.inputText view {
		margin-top: 35px;
	}

	.inputText input {
		padding: 10px 0px;
		margin-top: 10px;
		border-bottom: 1px solid #eee;
	}

	.button {
		width: 300px;
		padding: 30px 0;
		text-align: center;
		background: #0099CC;
		color: #fff;
		border-radius: 40px;
		box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		margin: 0 auto;
		margin-top: 150px;
	}

	.tishi {
		color: red;
		font-size: 25px;
		margin: 30px 0;
	}
</style>
